<template>
    <div>
        <div id="container">
        </div>
        <img src="http://photos.breadtrip.com/covers_2014_07_31_4ba6bcaf386a99ade58c34c09d6d26ed.png" class="pic" ref="pic">
    </div>
</template>

<script>
    export default {
        mounted: function() {
            var map = new BMap.Map("container");
            var point = new BMap.Point(this.jingDu, this.weiDu);

            // 设置地图显示的中心点和缩放比例
            map.centerAndZoom(point, 15);

            // 开启滚轮缩放
            map.enableScrollWheelZoom(true);

            var myIcon = new BMap.Icon("http://photos.breadtrip.com/covers_2014_07_31_4ba6bcaf386a99ade58c34c09d6d26ed.png", new BMap.Size(22, 40), {
                anchor: new BMap.Size(11, 40),
                imageOffset: new BMap.Size(0, 0),
                imageSize: new BMap.Size(22, 40)
            });
            var marker = new BMap.Marker(point, {
                icon: myIcon
            });
            marker.enableDragging();
            setTimeout(function() {
                map.addOverlay(marker);
            }, 600);
            

            this.$store.commit("setIsLoading",false);
        },
        computed: {
            weiDu: function() {
                return this.$route.query.wei;
            },
            jingDu: function() {
                return this.$route.query.jing;
            }
        }
    }
</script>

<style scoped>
    #container {
        width: 100vw;
        height: 100vh;
    }
    
    .pic {
        position: absolute;
        opacity: 0;
        bottom: 50vh;
        left: 50%;
        transform: translateX(-50%);
        animation: ani 0.6s;
        z-index: -1;
    }
    
    @keyframes ani {
        0% {
            z-index: 10000;
            opacity: 1;
            bottom: 100vh;
        }
        60% {
            z-index: 10000;
            opacity: 1;
            bottom: 52vh;
        }
        80% {
            z-index: 10000;
            opacity: 1;
            bottom: 54vh;
        }
        99% {
            z-index: 10000;
            opacity: 1;
            bottom: 50vh;
        }
        100%{
            z-index: 10000;
            opacity: 0;
        }
    }
</style>